<template>
    <div>
        <Topbar></Topbar>
      
        <!-- 用户注册界面 -->
        <div class="ulogin_box">
      <!-- 卡片 -->
      <el-card class="box_card">
        <!-- 登录表单 -->
        <el-form
          :model="registerFrom"
          status-icon
          :rules="rules"
          ref="registerFrom"
          label-width="25px"
          class="demo-registerFrom"

        >
        <span class="span">未注册手机将自动注册</span>
        <br /><br />
       <!-- 用户名 -->
        <el-form-item  prop="username">
            <el-input 
               type="username" 
               v-model.lazy="registerFrom.username" 
               autocomplete="off" 
               placeholder="请输入用户名" >
            </el-input>
          </el-form-item>
           <!-- 手机号 -->
        <el-form-item  prop="phone">
            <el-input 
               type="phone" 
               v-model.lazy="registerFrom.phone" 
               autocomplete="off" 
               placeholder="请输入手机号" >
            </el-input>
          </el-form-item>
          <!-- 邮箱 -->
          <el-form-item  prop="email">
            <el-input 
               type="email" 
               v-model.lazy="registerFrom.email" 
               autocomplete="off" 
               placeholder="请输入邮箱" >
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item  prop="code">
           <el-row :gutter="30">
            <el-col :span="16">
              <el-input 
                  type="code" 
                  v-model.lazy="registerFrom.code" 
                  autocomplete="off" 
                  placeholder="请输入验证码">
              </el-input>
            </el-col>
            <el-col :span="8">
              <span class="verif" v-html="verif" @click="getverif"></span>
            </el-col>
           </el-row>
          </el-form-item>
        <!-- 密码 -->
          <el-form-item prop="pwd">
            <el-input 
               type="password" 
               v-model.lazy="registerFrom.pwd" 
               autocomplete="off" 
               placeholder="请输入密码">
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd2">
            <el-input 
                type="password" 
                v-model.lazy="registerFrom.pwd2" 
                autocomplete="off" 
                placeholder="确认密码">
            </el-input>
          </el-form-item>
         <!-- 登录提交按钮 -->
          <el-form-item class="button">
            <el-row :gutter="120">
              <el-col :span="12">
                <el-button 
                   style="width:100%;background:#7440d8;color:azure;border:none;" 
                   @click="submitForm('registerFrom')">注  册</el-button>
              </el-col>
              <el-col :span="12">
                <el-button style="width:100%;" @click="resetForm('registerFrom')">重  置</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        
       
      </el-card>
    </div>
    </div>
    <!--  -->
  
</template>

<script>
  import qs from 'qs'
   import Topbar from '../../Topbar.vue' 
// import { request } from 'http';
   export default {
        data(){
          // 用户名
          var username = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
         callback(new Error('长度在 2 到 10 个字符'))
        
      }
    };

             // 手机
    var phone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if(!this.isPhone(value)) {//引入methods中封装的检查手机格式的方法
          callback(new Error('请输入11位的手机号'));
        }else{
          callback()
        }
      };
      // 邮箱
      var email = (rule, value, callback) => {
    const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
    if (!value) {
      return callback(new Error('邮箱不能为空'))
    }
    setTimeout(() => {
      if (mailReg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的邮箱格式'))
      }
    }, 100)
  }

    //   验证码
      var code = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请获取验证码'));
        } else {
          // if (this.registerFrom.pwd2 !== '') {
          //   this.$refs.registerFrom.validateField('pwd2');
          // }
          callback();
        }
      };
    
      // 密码
      var pwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.registerFrom.pwd2 !== '') {
            this.$refs.registerFrom.validateField('pwd2');
          }
          callback();
        }
      };
      var pwd2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerFrom.pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      verif:'获取验证码',
      // 验证registerFrom对象属性
      registerFrom: {
          username:'',
          phone:'',
          email: '',
          code:'',
          pwd: '',
          pwd2: '',
          // 验证码
          
        },
        // 验证规则:属性名称要和表单对象的属性名称保持一致，否则会失效
        rules: {
          // 用户名
          username: [ // 用户名校验规则
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          // 手机规则
          phone:[
            { validator: phone, trigger: 'blur' }
          ],
          // 邮箱
          email:[
             { validator: email, trigger: 'blur' }
          ],
          // 验证码
          code:[
            { validator: code, trigger: 'blur' }
          ],
          // 密码
          pwd: [
            { validator: pwd, trigger: 'blur' },
            { min: 6,max: 10,message: '长度在 6 到 10个字符'}, 
		        {pattern: /^(\w){6,10}$/, message: '只能输入6-10个字母、数字、下划线'},
          ],
          // 二次密码
          pwd2: [
            { validator: pwd2, trigger: 'blur' },
          ],
       
        }
      };
  
        },
        methods: {
    // 检查手机号码是否正确
	   isPhone(val) {
	      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
	        return false;
	      } else {
	        return true;
	      }
	    },
      mounted() {
        this.getverif()
      },
      // 点击获取验证码按钮
      getverif(){
        if(this.registerFrom.phone == ''){
          this.$message.error('请先输入手机号之后再获取验证码')
          return
        }
        // 查询是否注册
        this.$axios({
                url:'/getverif',
                method:'get',
                data:{
                  code: this.registerFrom.code,                
                }
            }).then(res=>{
                console.log(res);
               this.verif = res.data
            }) 
           
      },
  
      
    // 点击注册
     submitForm(formName) {
        // 前端验证
        this.$refs[formName].validate((valid) => {
          
          if (valid) {
            // console.log(valid,66666);
            var data = {
              username:this.registerFrom.username,
              phone: this.registerFrom.phone,
              email: this.registerFrom.email,
              code: this.registerFrom.code,
              pwd:this.registerFrom.pwd,
              pwd2:this.registerFrom.pwd2,
      };

          this.$axios({
                // header: { 'Content-Type ' : 'application/json '},
                url:'/userregister',
                method:'POST',
                data:data
                
            }).then(res=>{
                console.log(res);
                if(res.data.code === 2001 ){
                    // this.$message
                    this.$router.push({path:'/userlogin'})
                    return
                }else if(res.data.code === 4001) {
                    this.$message.error('邮箱已被注册,请重新输入')
                }else if(res.data.code === 4004) {
                    this.$message.error('手机已被注册,请重新输入')
                }else if(res.data.code === 4011) {
                    this.$message.error('验证码错误,请重新输入')
                    this.getverif()
                }
            })  
          } else {
              // 失败后提示
            //   this.$message({
            //   message:'输入有误',
            //   type:'error'
            // })
            return false;
          }
        
        });
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    
  },

        components:{
            Topbar
        }
    }
</script>
<style scoped>
    .ulogin_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 卡片 */
.box_card {
  margin-top: 50px;
  width: 550px;
  height: 490px;
  background-color: #fcfcfc;
}
.loginFrom {
  height: 200px;
  width: 300px;
  box-shadow: 00 25px #cac6c6;
}
.button {
  margin-left: 120px;
  margin-top: 50px;
}
.span {
  color: #555454;
  font-size: 10px;
  margin-left: 10px;
}
.verif {
  color: #686868;
}
.verif:hover {
  color: #7440d8;
  text-decoration:underline;
  cursor:pointer;
}
</style>